<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1000px">
			<el-tabs v-model="state.dialog.type" type="border-card">
				<el-tab-pane name="en" label="英文" />
				<el-tab-pane name="lo" label="老挝语" />
			</el-tabs>
			<el-form ref="formRef" :model="state.translationForm">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-divider content-position="left">翻译内容</el-divider>
					</el-col>
					<el-col :span="12">
						<el-divider content-position="left">{{ state.dialog.type === 'en' ? '英文翻译' : '老挝翻译' }}</el-divider>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="联系人">
							<el-input v-model="state.translationForm.name.zh" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系人">
							<el-input
								v-model="state.translationForm.name[state.dialog.type]"
								:class="{ w83: state.originalForm.name[state.dialog.type] !== state.translationForm.name[state.dialog.type] }"
								placeholder="请输入联系人"
							/>
							<el-button
								v-if="state.originalForm.name[state.dialog.type] !== state.translationForm.name[state.dialog.type]"
								type="primary"
								@click="onTranslateEdit(state.translationForm.name)"
							>
								修改
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="退货地址">
							<el-input v-model="state.translationForm.address.zh" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="退货地址">
							<el-input
								v-model="state.translationForm.address[state.dialog.type]"
								type="textarea"
								:autosize="{ minRows: 4, maxRows: 4 }"
								:class="{ w83: state.originalForm.address[state.dialog.type] !== state.translationForm.address[state.dialog.type] }"
								placeholder="请输入退货地址"
							/>
							<el-button
								v-if="state.originalForm.address[state.dialog.type] !== state.translationForm.address[state.dialog.type]"
								type="primary"
								@click="onTranslateEdit(state.translationForm.address)"
							>
								修改
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
import { supplierApi, langApi } from '/@/api/supplier';

const SupplierApi = supplierApi();
const LangApi = langApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: 'en',
		title: '翻译管理',
		submitLoading: false,
	},
	originalForm: {
		name: {},
		address: {},
	} as any,
	translationForm: {} as any,
});

/********** 触发事件 **********/
// 修改翻译
const onTranslateEdit = (params: any) => {
	if (!params[state.dialog.type]) return ElMessage.warning('请修改内容不能为空');
	_langGoodsEdit({ lang_goods_id: params.id, [state.dialog.type]: params[state.dialog.type] }, params.tag);
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.type = 'en';
	state.originalForm = state.translationForm = {
		name: {},
		address: {},
	};
	_supplierAddressInfo({ supplier_address_id: row.id });
};

/********** 网络请求 **********/
// 获取供应商退货地址信息
const _supplierAddressInfo = (params: any) => {
	SupplierApi.supplierAddressInfo(params).then((res) => {
		const trans = res.data.info.trans;
		if (!Object.keys(trans).length) return;
		state.originalForm = JSON.parse(JSON.stringify(res.data.info.trans));
		state.translationForm = res.data.info.trans;
	});
};
// 系统相关单个翻译保存
const _langGoodsEdit = (params: Object, str: string) => {
	LangApi.langGoodsEdit(params)
		.then(() => {
			ElMessage.success('操作成功！');
			state.originalForm[str] = JSON.parse(JSON.stringify(state.translationForm[str]));
		})
		.catch(() => (state.translationForm[str] = state.originalForm[str]));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
